<template>
  <view class="user_detail">
    <AtMessage />
    <view class="user_top">
      <image class="head_img" :src="detailData.imgUrl"></image>
      <view class="user_num">卡号：{{detailData.card_num}}</view>
    </view>
    <view class="user_msg">
      <view class="user_msg_line">
        <view class="line_label">用户名</view>
        <view class="line_value">
          <AtInput
            name='userName'
            type='text'
            class="input_align_r"
            :border="false"
            :value="detailData.user_info.real_name"
            :onChange="handleChangeUserName"
          />
        </view>
      </view>
      <view class="user_msg_line">
        <view class="line_label">手机号</view>
        <view class="line_value">
          <AtInput
            name='mobile'
            type='phone'
            class="input_align_r"
            :border="false"
            :value="detailData.mobile"
            :onChange="handleChangeMobile"
          />
        </view>
      </view>
      
      <view class="user_msg_line line_h80">
        <view class="line_label line_h80">性别</view>
        <view class="line_value input_align_r">
          <picker
            mode='selector'
            :range="sexOption"
            :value="userSex"
            @change="handleChangeSex"
          >
            <view class='demo-list-item line_h80'>
              {{userSex}}
              <AtIcon value='chevron-down' size='14' color='#444'></AtIcon>
            </view>
          </picker>
        </view>
      </view>
    </view>
    <view class="save_button" v-if="showSave">
      <!-- <text class="button_info">已修改</text> -->
      <AtButton type='primary' class="button_box" size="small" @click="save">保 存</AtButton>
    </view>
    <view class="user_msg">
      <view class="user_msg_line line_h80">
        <view class="line_label line_h80">会员等级</view>
        <view class="line_value input_align_r line_h80 line_button" @tap='showChangeLevel'>
          {{levelOption.find(x => x.value == userLeval).label}}
          <!-- <picker
            mode='selector'
            :range="levelOption"
            rangeKey='name'
            :value="userLeval"
            @change="handleChangeLevel"
          >
            <view class='demo-list-item line_button'>
              {{`${
                  levelOption[userLeval].name
                }`}}
            </view>
          </picker> -->
        </view>
      </view>
      <view class="user_msg_line line_h80">
        <view class="line_label">账户总余额</view>
        <view class="line_value input_align_r">{{detailData.user_info.wallet.balance}}</view>
      </view>
      <view class="user_msg_line line_h80">
        <view class="line_label">会员卡余额</view>
        <view class="line_value input_align_r line_button" @tap="changeBalance(1,detailData.user_info.wallet.wallet_balance)">{{detailData.user_info.wallet.wallet_balance}}</view>
      </view>
      <view class="user_msg_line line_h80" v-for="(item,index) in detailData.card_info" :key="index">
        <view class="line_label">{{item.name}}余额</view>
        <view class="line_value input_align_r line_button" @tap="changeBalance(3,item.balance,index)">{{item.balance}}</view>
      </view>
      <view class="user_msg_line line_h80">
        <view class="line_label">账户积分</view>
        <view class="line_value input_align_r line_button" @tap="changeBalance(2,detailData.user_info.wallet.point)">{{detailData.user_info.wallet.point}}</view>
      </view>
      <view class="user_msg_line line_h80">
        <view class="line_label">账户优惠券</view>
        <view class="line_value input_align_r">{{detailData.coupon_num}} 张
          <text class="line_button" @tap="gotoSend">发送优惠券</text>
        </view>
      </view>
    </view>
    <view class="user_msg" style="margin-bottom:50px">
      <view class="user_msg_line line_h80">
        <view class="line_label">注册时间</view>
        <view class="line_value input_align_r">{{detailData.create_time}}</view>
      </view>
      <view class="user_msg_line line_h80">
        <view class="line_label">累计积分</view>
        <view class="line_value input_align_r" @tap="gotoPoint()">{{detailData.total_point}}
          <text class="line_button">查看积分记录</text>
        </view>
      </view>
      <view class="user_msg_line line_h80">
        <view class="line_label">累计消费</view>
        <view class="line_value input_align_r" @tap="gotoOrder()">{{detailData.total_custom}}
          <text class="line_button">查看消费记录</text>
        </view>
      </view>
    </view>
    <AtFloatLayout 
      :isOpened="showDialog"
      :title="dialogTitle" 
      :onClose="handleClose">
      <view class="dialog_form">
        <view class="form_title">
          <view class="title_icon"></view>
          <view class="title_txt">当前余额</view> 
          <view class="title_right">{{dialogData.balance}}</view>
        </view>
      </view>
      <view class="dialog_form">
        <view class="form_title">
          <view class="title_icon"></view>
          <view class="title_txt">变化方式</view> 
        </view>
      </view>
      <view>
        <!-- <AtRadio
          :options="operateOpt"
          size="small"
          :value="dialogData.operate_type"
          :onClick="handleRadioChange"
        /> -->
        <AtCheckbox
          :options="operateOpt"
          :selectedList="checkedList"
          :onChange="handleChangeOperate"
        />
      </view>
      <view class="dialog_form line_h90">
        <view class="form_title">
          <view class="title_icon"></view>
          <view class="title_txt">变化数目</view>
          <view class="title_right">
            <AtInput
              name='value1'
              type='number'
              placeholder='输入变动数目'
              class="dialog_input"
              :value="dialogData.num"
              :onChange="handleInput"
              :border="false"
            />
          </view>
        </view>
      </view>
      <view class="dialog_form line_h90">
        <view class="form_title">
          <view class="title_icon"></view>
          <view class="title_txt">备注</view>
          <view class="title_right">
            <AtInput
              name='value2'
              type='text'
              placeholder='输入备注'
              class="dialog_input"
              :value="dialogData.remark"
              :onChange="handleInput2"
              :border="false"
            />
          </view>
        </view>
      </view>
      <view class="dialog_button">
        <AtButton type='primary' full @click="submit()">保 存</AtButton>
      </view>
    </AtFloatLayout>
    <AtFloatLayout
      :isOpened="showLevel"
      title="会员调级" 
      :onClose="handleCloseLevel">
      <view>
        <AtRadio
          :options="levelOption"
          size="small"
          :value="newLevel"
          :onClick="handleChangeLevel"
        />
      </view>
      <view class="dialog_button">
        <AtButton type='primary' full @click="submitLevel()">保 存</AtButton>
      </view>
    </AtFloatLayout>
    <AtToast :isOpened="showToast" :text="toastText"></AtToast>
    <AtToast :isOpened='showLoading' :duration='0' text="正在加载" status="loading"></AtToast>
  </view>
</template>
<script>
import Taro from '@tarojs/taro'
import './userDetail.module.scss'
import { AtMessage } from 'taro-ui'
import UserAPI from '../../../api/user'
export default {
  data(){
    return{
      detailData: {
        card_info: [],
        user_info:{
          wallet:{},
        }
      },
      usrId: "", // 用户id
      userLeval: "0", // 用户会员卡等级
      userSex: "未知", // 用户性别
      cardList: [], // 用户充值卡项
      sexOption: ['未知','男','女'], // 性别选项
      levelOption: [
        {value: "0",label: ""}
      ], // 会员卡等级选项
      showSave: false,
      showDialog: false, // 修改积分/余额弹窗
      dialogTitle: "余额调整", // 弹窗标题
      dialogData: {
        type: 1, // 充值类型 1.余额 2.积分 3.加油卡 4.车队卡
        operate_type: "1", // 变动类型 1.增加 2.减少 3.最终余额
        num: "", // 变动数值
        remark: "", // 备注
        balance: "", // 当前余额
        type_card_id: "", // 变动卡项id
        card_index: "", // 变动卡项再card_info中的位置
      },
      operateOpt: [
        { label: "增加", value: "1"},
        { label: "减少", value: "2"},
        { label: "最终余额", value: "3"},
      ],
      showLevel: false, // 会员调级弹窗
      newLevel: "", // 要调整的会员等级
      checkedList: [], // 选择的变动方式
      showToast: false, // toast轻提示
      toastText: "", // 提示内容
      showLoading: false,
    }
  },
  mounted(){
    // this.init();
    this.getLevelOption();
  },
  methods:{
    async getLevelOption(){
      this.showLoading = true;
      const res = await UserAPI.userLevelSelect();
      if(res.code == 200){
        this.levelOption = res.data;
        this.levelOption.forEach(item => {
          item.label = item.name;
          item.value = item.id;
        })
        this.init();
      }
    },
    async init(){
      // console.log(Taro.getCurrentInstance().router.params);
      // this.userId = Taro.getCurrentInstance().router.params.uid;
      this.userId = Taro.getStorageSync('detail_id')
      var data = {
        id: this.userId,
        app_id: Taro.getStorageSync('app_id')
      }
      const res = await UserAPI.getUserDetail(data);
      if(res.code == 200) {
        this.detailData = res.data
        this.detailData.imgUrl = res.data.user_info.headimgurl || "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
        var sIndex = res.data.sex || 0;
        this.userSex = this.sexOption[sIndex];
        // this.userLeval = this.levelOption.findIndex(x => x.id == res.data.card.id);
        this.userLeval = res.data.card.id;
      }
      this.showLoading = false;
    },
    // 修改用户名
    handleChangeUserName(val){
      this.detailData.user_info.real_name = val;
      this.showSave = true;
    },
    // 修改手机号
    handleChangeMobile(val){
      this.detailData.mobile = val;
      this.showSave = true;
    },
    // 修改性别
    handleChangeSex(val){
      console.log(val)
      this.userSex = this.sexOption[val.detail.value]
      this.showSave = true;
    },
    // 会员调级
    handleChangeLevel(val){
      console.log(val)
      // this.userLeval = val.detail.value;
      // this.showSave = true;
      this.newLevel = val;
    },
    async save(){
      var data = {
        app_id: Taro.getStorageSync('app_id'),
        id: Taro.getStorageSync('detail_uid'),
        mobile: this.detailData.mobile,
        real_name: this.detailData.user_info.real_name,
        sex: this.userSex == "男"? "1":this.userSex == "女"? "2":"0"
      }
      const res = await UserAPI.userMsgEdit(data);
      if(res.code == 200){
        this.saveEnd(1);
        this.showSave = false;
      }else{
        this.saveEnd(res.msg);
      }
    },
    gotoOrder(){
      Taro.navigateTo({
        url: '/pages/menuList/userOrder/userOrder'
      })
    },
    gotoPoint(){
      Taro.navigateTo({
        url: '/pages/menuList/userPoint/userPoint'
      })
    },
    handleClose(){
      this.showDialog = false;
    },
    // 余额/积分 调整弹窗
    changeBalance(i,val,index){
      console.log(index)
      this.dialogData.type = i;
      if(i == 1){
        this.dialogTitle = "余额调整";
      }
      if(i == 2){
        this.dialogTitle = "积分调整";
      }
      if(i == 3){
        this.dialogTitle = this.detailData.card_info[index].name + "余额调整";
        this.dialogData.card_index = index;
      }
      this.showDialog = true;
      this.dialogData.balance = val;
    },
    // 余额/积分 调整方式 1.增加 2.减少 3.最终
    handleRadioChange(value){
      this.dialogData.operate_type = value
    },
    // 余额/积分 调整数目
    handleInput(val){
      this.dialogData.num = val;
    },
    // 余额/积分 备注
    handleInput2(val){
      this.dialogData.remark = val;
    },
    // 余额/积分 调整提交
    async submit(){
      console.log(this.dialogData.card_index)
      if(this.checkedList.length == 0){
        this.toastText = "请选择变动方式";
        this.showToast = true;
        return false;
      }
      var data = {
        emp_id: Taro.getStorageSync('emp_id'),
        app_id: Taro.getStorageSync('app_id'),
        uid: Taro.getStorageSync('detail_uid'),
        num: this.dialogData.num,
        // operate_type: this.dialogData.operate_type,
        operate_type: this.checkedList[0],
        type: this.dialogData.type == 2? "2":"1",
        type_card_id: this.detailData.card_info[this.dialogData.card_index].id,
      }
      console.log(data);
      const res = await UserAPI.userAccountEdit(data);
      console.log(res);
      if(res.code == 200){
        this.showDialog = false;
        this.saveEnd(1)
      }else{
        this.saveEnd(res.msg);
      }
    },
    saveEnd(i){
      if(i == 1){
        Taro.atMessage({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
      }else{
        var t = "保存失败: "+i;
        Taro.atMessage({
          message: t,
          type: 'error',
          duration: 2000
        })
      }
    },
    showChangeLevel(){
      this.newLevel = this.userLeval;
      this.showLevel = true;
    },
    handleCloseLevel(){
      this.showLevel = false;
    },
    async submitLevel(){
      console.log(this.newLevel)
      var data = {
        app_id: Taro.getStorageSync('app_id'),
        user_level_id: this.newLevel,
        uids: Taro.getStorageSync('detail_uid'),
        emp_id: Taro.getStorageSync('emp_id')
      };
      const res = await UserAPI.userLevelSave(data);
      if(res.code == 200){
        this.showLevel = false;
        this.saveEnd(1);
      }else{
        this.saveEnd(res.msg);
      }
    },
    gotoSend(){
      Taro.navigateTo({
        url: "/pages/menuList/sendCoupon/sendCoupon"
      })
    },
    handleChangeOperate(val){
      console.log(val);
      if(val.length == 1){
        this.checkedList = val;
      }else{
        var i = this.checkedList[0];
        val.forEach(item => {
          if(item != i){
            this.checkedList = [item]
          }
        })
      }
    }
  }
}
</script>